<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>套餐包</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/layui.css" rel="stylesheet"  media="all">
</head>
<body>

<table id="package-list" ></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="addPackage">新增套餐包</button>
      <button class="layui-btn layui-btn-sm" lay-event="btnExport">全部导出</button>
    </div>
</script>

<script type="text/html" id="switchTpl">
    <input type="checkbox" name="enableFlag" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" 
    lay-filter="enableFilter" {{ d.enableFlag == true? 'checked' : '' }}>
</script>

<script src="js/layui.js"></script>
<script type="module">
    import setMeal from './js/set-meal.js'
    
    layui.use(['table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var packageListData = null;

        // 加载套餐包列表
        var loadRechargePackageist = function(isExport){
            setMeal.getRechagePackageList($,function(rspData){
                packageListData = rspData.data;
                //表格数据渲染
                var insTable = table.render({
                elem: '#package-list'
                ,title:'套餐包列表'
                ,toolbar:'#toolbarDemo'
                ,width: 1000
                ,height: 500
                ,size:'lg'
                ,editTrigger: 'dblclick'
                ,cols: [[{ type:"numbers", width:80, title: '序号', sort: true, fixed: 'left'}
                ,{field:'id', hide:true}
                ,{field:'name', width:200, title: '套餐名称',edit: 'text'}
                ,{field:'monthNumber', width:100, title: '使用月数',edit: 'text'}
                ,{field:'giveMonth', width:100, title: '赠送月数',edit: 'text'}
                ,{field:'originalPrice', width:100, title: '原价(元)',edit: 'text'}
                ,{field:'price', width:120, title: '实际价格(元)',edit: 'text'}
                ,{field:'enableFlag', width:100, title: '启用状态',templet: '#switchTpl', unresize: true,exportTemplet: function(d, obj){
                    // 处理该字段的导出数据
                    // var td = obj.td(this.field); //获取当前 td
                    // return td.find('input').val();
                    var text = "否";
                    if(d.enableFlag){
                        text = "是";
                    }

                    return text;
                }}
                ,{field:'createTime', width:160, title: '创建时间'}
                ]]
                ,data: rspData.data
                ,even: true
                ,page: true //是否显示分页
                ,limits: [10, 15, 20]
                ,limit: 10 //每页默认显示的数量
                });
                if(isExport){
                    table.exportFile(insTable.config.id,rspData.data,'xls');
                }
            })
        }
        loadRechargePackageist();

        // 工具栏事件
        table.on('toolbar(package-list)', function(obj){
            switch(obj.event){
                case 'addPackage':
                layer.open({
                    type: 2
                    ,title:'新增套餐包'
                    ,content: 'set-meal-add.html'
                    ,area: ['450px', '500px']
                    ,maxmin: false,
                });
                break;
                case 'btnExport':
                    loadRechargePackageist(true);
                break;
            };
        });

        // 启用状态操作
        form.on('switch(enableFilter)', function(obj){
            var id = this.value;
            $.each(packageListData,function(idx,packageData){
                if(packageData.id == parseInt(id)){
                    packageData.enableFlag = obj.elem.checked;
                    // 更新
                    setMeal.updateRechargePackage($,packageData,function(rspData){
                        if(rspData.code == 1){
                            table.reloadData('package-list',{ data : packageListData})
                        }
                    })
                }
            });
        });
        table.on('edit(package-list)', function(obj){
            var field = obj.field //得到字段
            ,value = obj.value //得到修改后的值
            ,data = obj.data; //得到所在行所有键值
            if(field !='name'){
                if(value.trim() == '' || isNaN(value)){
                    layer.alert("请填写数字")
                    var update = {};
                    update[field] = obj.oldValue;
                    obj.update(update);
                    return;
                } else {
                    var pass = true;
                    if(field == 'monthNumber' && value < 1){
                        layer.alert("请填写大于等于1的数字")
                        pass = false;
                    }
                    if(field == 'giveMonth' && value < 0){
                        layer.alert("请填写大于等于0的数字")
                        pass = false;
                    }
                    if(field == 'originalPrice' && value < 1){
                        layer.alert("请填写大于等于1的数字")
                        pass = false;
                    }
                    if(field == 'price' && value <=0){
                        layer.alert("请填写大于0的数字")
                        pass = false;
                    }
                    if(!pass){
                        var update = {};
                        update[field] = obj.oldValue;
                        obj.update(update);
                        return;
                    }
                }
            }
            var update = {};
            update[field] = value;
            // 更新
            setMeal.updateRechargePackage($,data,function(rspData){
                if(rspData.code == 1){
                    obj.update(update);
                }
            })
        });
        
    });
        
        
</script>
</body>

</html>